var path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
//启动热更新的第一步
const webpack = require("webpack");


var config={
    entry:{
        main:"./src/main.js" //执行命令的路径开始
    },
    output:{
        path:path.join(__dirname,"./hello"),//决定webpack打包后的输出目录
        filename:"main.js",
        /*
            webpack-dev-server在内存中进行打包时生成的静态文件所在的位置,会影响main.js&图片资源
            如果同时配置了output.publicPath和devServer.contentBase的话:
                1.a.jpg内存中打包后的图片存在于/hello/a.jpg中,而不在/a.jpg中,/images/a.jpg中的是原始图片
                2.main.js内存中打包后的文件存在于/hello/main.js中,/src/main.js中的是原始js文件
                3.index.html内存中打包后的文件存在于/hello/index.html中,/index.html是原始文件
                综上如果配置了output.publicPath和devServer.contentBase就等于根目录是contentBase,子目录是publicPath
         */
        publicPath: '/hello123321/' //决定内存打包和实际打包后html文件引用js的路径,如果output中没配置publicPath就使用main.js相对路径,否则就使用/hello/main.js
    },
    /*
        contentBase:"src"代表的是"/"指向的路径
     */
    devServer: {
        open:true,
        port:3000,
        publicPath:"/hello/", //如果devServer和output中都配置了publicPath,则听devServer中的,所以使用/hello/main.js才能访问到内存中打包好的js文件
        contentBase:"src"
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),//new一个热更新的模块对象,启动热更新的第二步
        new htmlWebpackPlugin({ //创建在一个内存中生成html页面的插件
            template:path.join(__dirname,"./src/index.html"),//根据指定的页面路径去生成内存中和 output.path 指定路径下的页面
            filename:"index520.html"//指定生成页面的名称,它会生成到 output.path 指定的路径下
        })
    ],
    module:{
        rules:[
            {test: /\.css$/, use: ["style-loader","css-loader"]},
            /*
                limit给定的值是图片的大小单位是byte即字节,字节用大写的B表示。如果我们引用的图片大于给定的limit值,则不会被转为base64格式的字符串。
                图片的名字是:8位hash值-原始的名字.原始的格式
                limit=33000&name=[hash:8]-[name].[ext]
             */
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: ["url-loader?limit=33000&name=[name].[ext]"]},
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use: ["url-loader"]}, //处理字体文件的配置项
            {test: /\.js$/, use: "babel-loader", exclude: /node_modules/}//exclude表示哪些目录中的.js文件不要进行 babel-loader
        ]
    }
}

module.exports=config;

